<template>
  <div class="common_footer">
    <div class="termService">
      <div @click="handleGoPolicy">Cookie Policy<span>|</span></div>
      <div @click="handleGoPrivacy">Privacy Policy <span>|</span></div>
      <div @click="handleGoService">Terms of Service</div>
    </div>
    <!-- 多语言 -->
    <div class="wrap_lan">
      <div class="left_block">© AI Hub</div>
      <div class="right_block" @click="showPopup">
        <img src="@/assets/img/new-home/地球.png" />
        <div class="lang_name">{{ currentLang }}</div>
      </div>
    </div>
    <!-- 多语言弹框 -->
    <van-popup v-model:show="show" position="bottom" :style="{ height: '40%' }">
      <div class="select_lang_wrap">
        <p class="title">Select Your Language</p>
        <ul class="select_ul">
          <li v-for="item in langList" :key="item.code" @click="selectLang(item)">
            <div class="radio_wrap" v-if="item.code === activeCode">
              <van-radio></van-radio>
            </div>
            <span>{{ item.name }}</span>
          </li>
        </ul>
      </div>
    </van-popup>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from "vue";
import { i18n, setVantLocale } from "@/lang";
import router from "@/router";
const show = ref(false);
const currentLang = computed(() => i18n.global.locale.value === 'en' ? 'English' : '中文');
// 默认英文
const activeCode = ref("en");

const showPopup = () => {
  show.value = true;
};

const handleGoPolicy = () => {
  router.push("./cookiePolicy");
}

const handleGoPrivacy = () => {
  router.push("./privacyPolicy");
}

const handleGoService = () => {
  router.push("./termsService");
}

const langList = reactive([
  { name: "English", code: "en" },
  { name: "中文", code: "zh" },
  // { name: "Bahasa Indonesia", code: "BI" },
  // { name: "Español", code: "ES" },
  // { name: "Français", code: "FC" },
  // { name: "Italiano", code: "IL" },
  // { name: "Português", code: "PT" },
  // { name: "Русский", code: "PY" },
  // { name: "한국어", code: "CL" },
  // { name: "日本語", code: "JP" },
]);

const selectLang = (item) => {
  console.log(item);
  const lang = item.code;
  i18n.global.locale.value = lang;
  setVantLocale(lang);
  localStorage.setItem("lang", lang);
  activeCode.value = item.code;
  show.value = false;
};
onMounted(() => {
  // 初始化时读取本地存储
  const savedLang = localStorage.getItem("lang") || "en";
  i18n.global.locale.value = savedLang;
  activeCode.value = savedLang;
});
</script>

<style scoped lang="less">
.common_footer {
  width: 100%;
  box-sizing: border-box;
  position: relative;
  margin-top: 24px;
  margin-bottom: 24px;

  .termService {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.95);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 49px;
    line-height: 49px;

    div {
      margin-bottom: 10px;

      span {
        margin: 0 8px;
      }
    }
  }

  .wrap_lan {
    height: 48px;
    display: flex;
    box-sizing: border-box;
    justify-content: space-between;
    align-items: center;

    .left_block {
      font-weight: 400;
      font-size: 14px;
      color: rgba(0, 0, 0, 0.95);
    }

    .right_block {
      min-width: 106px;
      height: 41px;
      display: flex;
      background: #ffffff;
      border-radius: 8px 8px 8px 8px;
      border: 1px solid rgba(0, 0, 0, 0.45);
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      padding-left: 10px;
      padding-right: 10px;

      img {
        width: 16px;
      }

      .lang_name {
        font-size: 14px;
        color: rgba(0, 0, 0, 0.95);
        margin-left: 10px;
      }
    }
  }

  // 多语言弹框
  .select_lang_wrap {
    box-sizing: border-box;
    padding: 0 16px;

    .title {
      height: 48px;
      line-height: 48px;
      margin-top: 18px;
      margin-bottom: 8px;
      font-size: 18px;
      color: #000000;
      text-align: center;
      font-weight: 700;
    }

    .select_ul {
      li {
        width: 100%;
        height: 56px;
        border-radius: 8px 8px 8px 8px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        text-align: center;
        line-height: 56px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 8px;
        position: relative;

        .radio_wrap {
          position: absolute;
          left: 28px;
          top: 18px;
        }
      }
    }
  }
}
</style>
